<template>
	<view>
		<uni-search-bar radius="20" placeholder="请输入要查找的内容名称" />
		<view class="swiper-view">
			<swiper>
				<swiper-item v-for="i in 3">
					<image
						src="https://applet.youtuyiliao.com/profile/avatar/2022/12/29/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250114150117.jpg"
						mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="grid-view">
			<uni-grid :showBorder="false" :column="3" :highlight="false" :square="false" @change="onGridClick">
				<uni-grid-item v-for="(item, index) in gridList" :index="index">
					<view class="grid-item-inner">
						<view class="grid-img"
							:style="{ background: `linear-gradient(to bottom,${colorList[index % 9].bgColorTop},${colorList[index % 9].bgColorTottom})` }">
							<image style="width: 48rpx;height: 48rpx;" :src="item.iconUrl" />
						</view>
						<view class="grid-text">{{ item.name }}</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="bottom-grid-list-view">
			<view class="title-view">
				<view class="title">热门设备</view>
				<view class="right" @click="navToEquipmentDisplay">
					查看全部
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="grid-view">
				<uni-grid :column="2" :square="false" :showBorder="false" :highlight="false" @change="navToDetails">
					<uni-grid-item v-for="(item, index) in list" :index="index">
						<view class="grid-inner">
							<image :src="item.picShowUrl"></image>
							<view class="name">{{ item.name }}</view>
							<view class="money">￥{{ item.price }}/月</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

	</view>
</template>

<script>
import * as assistDevSort from '../../common/api/assistDevSort.js'
import * as assistDev from '../../common/api/assistDev.js'
export default {
	data() {
		return {
			colorList: [
				{
					bgColorTop: '#86CDF9',
					bgColorTottom: '#58A2F9',
				},
				{
					bgColorTop: '#9CDE48',
					bgColorTottom: '#80CD4B',
				},
				{
					bgColorTop: '#F8DA7A',
					bgColorTottom: '#F4B74D',
				},
				{
					bgColorTop: '#F3A5C7',
					bgColorTottom: '#EF7F8E',
				},
				{
					bgColorTop: '#89D3FC',
					bgColorTottom: '#6FC5F3',
				},
				{
					bgColorTop: '#F4A571',
					bgColorTottom: '#F98465',
				},
				{
					bgColorTop: '#F9C88A',
					bgColorTottom: '#FD9E68',
				},
				{
					bgColorTop: '#8BCEFB',
					bgColorTottom: '#58A5F7',
				},
				{
					bgColorTop: '#86D8D1',
					bgColorTottom: '#6BBDD2',
				}
			],
			gridList: [],
			list: []
		}
	},
	mounted() {
		this.queryAllFirstSort()
		this.getTopHotList()
	},
	methods: {
		// gridGridIcon(item) {
		// 	return require(`../../../static/feixiang/accessory-rental/${item.iconUrl}.png`)
		// },
		getGridBgColor(item) {
			return {
				background: `linear-gradient(to bottom,${item.bgColorTop},${item.bgColorTottom})`
			}
		},
		onGridClick(e) {
			console.log(JSON.stringify(e));
			const code = this.gridList[e.detail.index].code
			uni.navigateTo({
				url: "/accessoryRentalPages/pages/equipment-display/equipment-display?code=" + code
			})
		},
		navToEquipmentDisplay() {
			uni.navigateTo({
				url: "/accessoryRentalPages/pages/equipment-display/equipment-display"
			})
		},
		navToDetails(e) {
			const index = e.detail.index
			const item = this.list[index]
			uni.navigateTo({
				url: "/accessoryRentalPages/pages/product-details/product-details?uid=" + item.uid
			})
		},
		queryAllFirstSort() {
			assistDevSort.queryAllFirstSort({}).then(result => {
				console.log('queryAllFirstSort', result);
				this.gridList = result.data.data.rows || []
			}).catch(error => {
				console.log(error);
			})
		},
		getTopHotList() {
			assistDev.queryList({
				pageIndex: 1,
				pageSize: 4,
			}).then(result => {
				this.list = result.data.data.rows || []
			}).catch(error => {
				console.log(error);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.swiper-view {
	width: 100%;
	height: 350rpx;

	image {
		width: 100%;
		height: 350rpx;
	}

	swiper {
		width: 100%;
		height: 350rpx;
	}
}

.grid-view {
	margin-top: 10rpx;

	.grid-item-inner {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 10rpx;
	}

	.grid-img {
		width: 100rpx;
		height: 100rpx;
		background: #00BCB2;
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.grid-text {}
}

.bottom-grid-list-view {
	.title-view {
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;

		.title {
			flex: 1;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.grid-view {
		.grid-inner {
			padding: 10rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 200rpx;
			}

			.name {
				font-size: 30rpx;
				margin-top: 10rpx;
			}

			.money {
				font-size: 40rpx;
				font-weight: bold;
				color: #2FCBCB;
			}
		}
	}
}
</style>